<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>我的作业</title>
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>

    <link rel="stylesheet" href="../js/libs/sui/sm.min.css">
    <link rel="stylesheet" href="../js/libs/sui/sm-extend.min.css">
    <link rel="stylesheet" href="../iconfont/iconfont.css">
    <link rel="stylesheet" href="../../public/css/api.css">
    <link rel="stylesheet" href="../less/main.css"/>

    <script type='text/javascript' src='../js/libs/jquery-3.1.0.min.js' charset='utf-8'></script>
    <script type="text/javascript">
        var Zepto = jQuery;
    </script>
    <script type='text/javascript' src='../js/libs/sui/sm.js' charset='utf-8'></script>
    <script type='text/javascript' src='../js/libs/sui/sm-extend.min.js' charset='utf-8'></script>
    <script src="../js/libs/juicer-min.js"></script>
    <script src="../js/libs/jquery.md5.js"></script>
    <script src="../js/api.js"></script>
    <script src="../js/utils.js"></script>
    <script src="../js/common.js"></script>
</head>
<body>
<div class="page">
    <!-- 标题栏 -->
    <header class="bar bar-nav">
        <a class="icon iconfont c-white pull-left" onclick="javascript:api.closeWin();">&#xe61f;</a>
        <!--<a class="icon icon-refresh pull-right"></a>-->
        <h1 class="title">我的作业</h1>
    </header>
    <div class="content bg-default">

        <div class="my-homework-tip c-gray">温馨提示：点击已选班级查看作业</div>
        <!--班级选课-->
        <div class="my-choose-class">
            <div class="item-con">
                <!--<div class="head">JAVA课程</div>-->
                <div class="con">
                    <!--加上.choosed类表示已选-->
                    <!--
                    <div class="item choosed">
                        JAVA(1)班
                    </div>
                    -->
                    <!--
                    <div class="item">
                        JAVA(1)班(1)班JAVA(1)班JAVA(1)班
                    </div>
                    <div class="item">
                        JAVA(1)班
                    </div>
                    <div class="item">
                        JAVA(1)班
                    </div>
                    <div class="item">
                        2班
                    </div>
                    <div class="item">
                        3班
                    </div>
                    -->
                </div>
            </div>
        </div>
    </div>
</div>
<script id="choose-course-tpl" type="text/template">
    {@each courseList as it,index}
    <div class="head">&{it.class_type_name}</div>

    <div class="con">

        {# 该课程已开班}
        {@each it.class_type as clazz,index}

        {# choose_student_id 为0 表示该学生未选择该班级}
        {@if clazz.CHOOSE_STUDENT_ID==0}

        {@if clazz.CLASS_NAME!=null&&clazz.CLASS_NAME!=""}
        <div data-clazz-id="&{clazz.CLASS_ID}" data-clazz-type-id="&{it.class_type_id}" class="item">
            &{clazz.CLASS_NAME}
        </div>
        {@else}
        <div style="height: 4rem;justify-content: center;width: 100%;display: flex;align-items: center;">该课程未开班</div>
        {@/if}


        {# 否则加上已选标签}
        {@else}
        <div data-clazz-id="&{clazz.CLASS_ID}" data-clazz-type-id="&{it.class_type_id}" class="item choosed">
            {@if clazz.CLASS_NAME!=null&&clazz.CLASS_NAME!=""}
            &{clazz.CLASS_NAME}
            {@/if}
        </div>
        {@/if}

        {@/each}


    </div>
    {@/each}
</script>
<script type="text/javascript">
    apiready = function () {
        juicer.set({
            'tag::operationOpen': '{@',
            'tag::operationClose': '}',
            'tag::interpolateOpen': '&{',
            'tag::interpolateClose': '}',
            'tag::noneencodeOpen': '$${',
            'tag::noneencodeClose': '}',
            'tag::commentOpen': '{#',
            'tag::commentClose': '}',
            'strip': false,
            'cache': false
        });

        var stuInfo = getLoginStudentInfo();
        var stuId = stuInfo.STUDENT_ID;
//        var stuId='20884';
        var sql = "SELECT s2.*, IFNULL(s4.STUDENT_ID,'0') AS CHOOSE_STUDENT_ID FROM ( SELECT s.STUDENT_ID, s.STU_NAME,s.CLASS_TYPE_ID,s.CLASS_TYPE_NAME,s1.CLASS_ID,s1.CLASS_NAME FROM stu_enroll s LEFT JOIN b_class s1 ON s.CLASS_TYPE_ID = s1.CLASS_TYPE_ID WHERE s.STUDENT_ID = '{0}') s2" +
                " LEFT JOIN (SELECT s3.STUDENT_ID, s3.CLASS_ID FROM s_student_class s3 WHERE s3.STUDENT_ID = '{1}') s4 ON s2.CLASS_ID = s4.CLASS_ID";
        var myCourseList; //用来验证学生是否已选该课程的班级


        dbQuery(1, 10, sql.format(stuId, stuId), true, function (ret, err) {

            if (isObject(ret) && ret.statusCode == 0) {

                if (ret.result.length > 0) {

                    //按课程
                    var map = {};
                    var dest = [];
                    for (var i = 0; i < ret.result.length; i++) {
                        var res = ret.result[i];
                        if (!map[res.CLASS_TYPE_ID]) {
                            dest.push({
                                class_type_id: res.CLASS_TYPE_ID,
                                class_type_name: res.CLASS_TYPE_NAME,
                                class_type: [res]
                            });
                            map[res.CLASS_TYPE_ID] = res;
                        } else {
                            for (var j = 0; j < dest.length; j++) {
                                var dres = dest[j];
                                if (res.CLASS_TYPE_ID == dres.class_type_id) {
                                    dres.class_type.push(res);
                                    break;
                                }
                            }
                        }
                    }
                    var courseData = {
                        courseList: dest
                    }
                    myCourseList = {
                        myCourses: dest
                    }

                    $(".item-con").html(juicer($("#choose-course-tpl").html(), courseData));

                } else {

                    toast("暂无课程");
                }

            }

        });

        //学生是否选了该班级 true--已选  false--未选
        function isChooseClazz(clazzId) {

            for (var i = 0; i < myCourseList.myCourses.length; i++) {

                for (var j = 0; j < myCourseList.myCourses[i].class_type.length; j++) {

                    var clazz = myCourseList.myCourses[i].class_type[j];
                    if (clazz.CLASS_ID == clazzId && clazz.CHOOSE_STUDENT_ID != 0) {
                        return true;
                    }
                }
            }

            return false;
        }


        $(".item-con").on("click", ".con .item", function () {
            var $this = $(this);
            var clazzId = $this.data("clazzId");
            var clazzTypeId = $this.data("clazzTypeId");

            //未选班
            if (!isChooseClazz(clazzId)) {

                toast("您没选该班级,不能查看作业");

            } else {

                openWin("my-homework-list", "my-homework-list.html", {
                    clazzId: clazzId
                });

            }
        });
    };
</script>
</body>
</html>
<!--<body class="my-homework">
<div class="content bg-white p-t22">
    <div class="class-table">
        <div class="head-no-toolbar bg-self-green">
            <span class="icon iconfont c-white p-l" onclick="javascript:api.closeWin();">&#xe61f;</span>
            <span class="c-white t-center">我的作业</span>
            <span></span>
        </div>
        <div class="content-padded">
            <div class="content-block-title f-normal m-b-0 title1 c-default pos-rel overflowAuto">
                <div id="table-name" style="padding-top: 1px;"></div>
                <input id="homeDate" type="text" placeholder="请选择日期"/>
            </div>
            <div class="content-block-title m-t-0 title2">
                上课地点：<span id="district-name"></span>
            </div>
            <div id="class-time">
               <div class="con first-con">
                   <div class="date"></div>
                   <div class="time-address">
                       <div id="course-list" class="item c-white">
                           <!--<div class="item-real">-->
<!--<table class="t-left">
    <tr>
        <td>
            <div>09:00-10:00</div>
            <div>博学楼101</div>
        </td>
        <td class="t-right showUpState">
            <div>
                <img src="../images/hasUpImg.png" alt="" style=""/>
            </div>
        </td>
    </tr>
    <tr>
        <td><div class="button upHomwork">删除上传的作业</div></td>
        <td class="t-right homeDetail">
            <span class="icon iconfont icon-yanjin"></span><span>查看</span>
        </td>
    </tr>
</table>
</div>
<div class="item-real">
<table class="t-left">
    <tr>
        <td>
            <div>09:00-10:00</div>
            <div>博学楼101</div>
        </td>
        <td class="t-right showUpState">
            <div>
                <img src="../images/noUpImg.png" alt=""/>
            </div>
        </td>
    </tr>
    <tr>
        <td><div class="button upHomwork">上传作业</div></td>
        <td class="t-right homeDetail">
            <span class="icon iconfont icon-yanjin"></span><span>查看</span>
        </td>
    </tr>
</table>
</div>-->
<!-- </div>
</div>
</div>
</div>
</div>
</div>
</div>-->
<!--<script id="course-list-tpl" type="text/template">
    {@each courseList as it,index}
    <div class="item-real">
        <table class="t-left">
            <tr>
                <td>
                    <div>&{it.BEGIN_TIME}-&{it.END_TIME}</div>
                    <div>&{it.CLASS_ROOM_NAME}</div>
                </td>
                <td class="t-right showUpState">
                    <div>
                        {# 如果作业ID为0 显示未上传 否则 显示已上传}
                        {@if it.ASSIGNMENT_ID==0}
                        <img src="../images/noUpImg.png" alt="" style=""/>
                        {@else}
                        <img src="../images/hasUpImg.png" alt="" style=""/>
                        {@/if}
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    {@if it.ASSIGNMENT_ID==0}
                    <div data-work-id="&{it.ASSIGNMENT_ID}" data-schedule-id="&{it.SCHEDULE_ID}" class="button upHomwork">上传作业</div>
                    {@else}
                    <div data-work-id="&{it.ASSIGNMENT_ID}" class="button upHomwork">删除作业</div>
                    {@/if}
                </td>
                <td data-work-id="&{it.ASSIGNMENT_ID}" class="t-right homeDetail">
                    {@if it.ASSIGNMENT_ID!=0}
                    <span  class="icon iconfont icon-yanjin"></span><span>查看</span>
                    {@/if}
                </td>
            </tr>
        </table>
    </div>

    {@/each}
</script>-->
<!--<script id="course-no-list-tpl" type="text/template">
    <div class="item-real">
        暂无数据
    </div>
</script>-->
<!--<script>
    apiready = function () {
        juicer.set({
            'tag::operationOpen': '{@',
            'tag::operationClose': '}',
            'tag::interpolateOpen': '&{',
            'tag::interpolateClose': '}',
            'tag::noneencodeOpen': '$${',
            'tag::noneencodeClose': '}',
            'tag::commentOpen': '{#',
            'tag::commentClose': '}',
            'strip': false,
            'cache': false
        });
        $("#homeDate").val(getCurrTime().substring(0,10));
        $("#homeDate").calendar({
            dateFormat:"yyyy-mm-dd",
            //设置最大可选日期为当前日期
            maxDate:getCurrTime().substring(0,10)
        }).click();
        $('body').click();

        //获取选择的日期
        $("#homeDate").on("change",function(){
            chooseDate=$(this).val();
            getData(chooseDate);
        });

        //一开始选择日期等于当前日期
        var chooseDate=getCurrTime().substring(0,10);


        var stuInfo=getLoginStudentInfo();
        var stuId=stuInfo.STUDENT_ID;

        var sql = "SELECT " +
                "*" +
                " FROM " +
                "(" +
                "SELECT " +
                "t3.SCHEDULE_ID," +
                "DATE_FORMAT(t3.CLASS_DATE, '%Y-%m-%d') AS CLASS_DATE," +
                "t4.TIME_NAME," +
                "t4.BEGIN_TIME," +
                "t4.END_TIME," +
                "t5.CLASS_NAME," +
                "t8.DISTRICT_NAME," +
                "t8.DISTRICT_ADDR," +
                "t3.CLASS_ROOM_NAME," +
                "IFNULL(t6.ASSIGNMENT_ID, '0') AS ASSIGNMENT_ID" +
                " FROM " +
                "(" +
                "SELECT " +
                "t2.CLASS_DATE," +
                "t2.TIME_ID," +
                "t2.CLASS_ID," +
                "t2.SCHEDULE_ID," +
                "t7.DISTRICT_ID," +
                "t7.CLASS_ROOM_NAME" +
                " FROM " +
                "s_student_class t1," +
                "b_schedule t2," +
                "e_class_room t7" +
                " WHERE " +
                "t1.CLASS_ID = t2.CLASS_ID" +
                " AND t1.CLASS_ID = t2.CLASS_ID" +
                " AND t1.STUDENT_ID = '{0}'" +
                " AND DATE_FORMAT(t2.CLASS_DATE, '%Y-%m-%d') = '{1}'" +
                ") t3" +
                " LEFT JOIN e_time_interval t4 ON t3.time_id = t4.TIME_ID" +
                " LEFT JOIN b_class t5 ON t3.CLASS_ID = t5.CLASS_ID" +
                " LEFT JOIN s_assignment t6 ON t3.SCHEDULE_ID = t6.SCHEDULE_ID" +
                " LEFT JOIN b_district t8 ON t3.DISTRICT_ID = t8.DISTRICT_ID" +
                ") t";


        getData(chooseDate);

        function getData(date){

            dbQuery(1,10,sql.format(stuId,date),true,function(ret,err){
                if(isObject(ret)&&ret.statusCode==0){

                    var courseData={courseList:ret.result};
                    if(ret.result.length!=0){
                        //设置课程名
                        $("#table-name").text(ret.result[0].CLASS_NAME)
                        //设置校区
                        $("#district-name").text(ret.result[0].DISTRICT_NAME);
                        $(".date").text(chooseDate.substr(5,10));

                        $("#course-list").html(juicer($("#course-list-tpl").html(),courseData));
                    }else{
                        //清空数据
                        $("#table-name").text("培训课程:无");
                        $("#district-name").text("无");
                        $(".date").text(chooseDate.substr(5,10));
                        $("#course-list").html($("#course-no-list-tpl").html());
                        toast("暂无数据");
                    }

                }

            });
        }

        //点击查看 进入 作业详情页面
        $("#course-list").on("click",".homeDetail",function(){
            var $this = $(this);
            var workId=$this.data("workId");
            if(workId!=0){
                openWin("my-homework-detail", "my-homework-detail.html", {workId:workId});
            }
        })

        //点击上传作业 or 删除作业
        $("#course-list").on("click",".upHomwork",function(){
            var $this = $(this);
            //作业id
            var workId=$this.data("workId");
            //课程表id
            var scheduleId=$this.data("scheduleId");

            //作业id 0--到上传作业页面  否则 根据id删除作业
            if(workId==0){
                openWin("add-homework", "add-homework.html", {scheduleId:scheduleId});
            }else{
                //删除
                var r = confirm("确认是否删除");
                if (r == true) {
                    var deleteSql="DELETE FROM s_assignment where ASSIGNMENT_ID='{0}'";
                    dbExecute(deleteSql.format(workId),true,function(ret,err){

                        if(isObject(ret)&&ret.statusCode==0){
                            toast("删除作业成功");
                            //刷新数据
                            getData(chooseDate);
                        }else{
                            toast("删除作业失败");
                        }

                    });
                }

            }

        });

        //接收添加作业事件 刷新页面
        api.addEventListener({
            name: 'workEvent'
        }, function (ret, err) {

            getData(chooseDate);
        });
    };

</script>
<script>
    $.init();
</script>
</body>
</html>-->
